<template>
	<view class="mainpadding" v-if="pageShow">
		<view class="" style="padding-bottom: 140rpx;">
			<!--  -->
			<view class="mainpadding ffffff radius">
				<view class="flexbetween ">
					<view class="flexleft">
						<view class="sanshier zhonghei fonweight margin_right2">{{startime}}</view>
						<view class="ershil xiaohui margin_right4">{{startweek}}</view>
					</view>
					<view class="hhbtn flexcenter margin_right4">{{daynum}}晚</view>
					<view class="flexleft">
						<view class="sanshier zhonghei fonweight margin_right2">{{endtime}}</view>
						<view class="ershil xiaohui">{{endweek}}</view>
					</view>
				</view>
				<view class="titletext xiaohei fonweight margin_top1">{{dataAll.hourse.name}}</view>
				<view class="flexleft flex-wrap">
					<view class="flexleft margin_top1" v-for="(value,key,index) in dataAll.hourse.attr_text" :key="key">
						<view class="smalltext xiaohui margin_right1">{{key}}-{{value}}</view>
						<view class="dqline margin_right1"></view>
					</view>
				</view>
				<!-- <view class="smalltext xiaohong margin_top2">不可取消</view> -->
			</view>
			<!--  -->
			<view class="ffffff radius margin_top mainpadding">
				<view class="fonweight titletext xiaohei">入住信息</view>
				<view class="flextop margin_top">
					<view class="ershiba xiaohei">房间数</view>
					<view class="xiahuaxian flexright" style="width: 79%;">
						<view class="margin_right2">
							<u-icon name="minus-circle" color="#FF9341" size="28"  @click="jian()"></u-icon>
						</view>
						<view class="zhonghei sanshier margin_right2">{{num}}</view>
						<u-icon name="plus-circle-fill" color="#FF9341" size="28" @click="jia"></u-icon>
					</view>
				</view>
				<view class="flextop margin_top">
					<view class="ershiba xiaohei">入住人</view>
					<view class="xiahuaxian " style="width: 79%;">
						<input placeholder="请输入入住人姓名" type="text" v-model="people_name" />
					</view>
				</view>
				<view class="flextop margin_top">
					<view class="ershiba xiaohei">联系手机</view>
					<view class="xiahuaxian " style="width: 79%;">
						<input placeholder="请输入手机号" type="number" v-model="people_mobile" />
					</view>
				</view>
			</view>
			<view class="ffffff radius margin_top mainpadding">
				<view class="fonweight titletext xiaohei">备注</view>
				<textarea v-model="note" placeholder="请输入备注" class="margin_top"
					style="width: 100%;height: 150rpx;"></textarea>
			</view>
			<view class="ffffff radius mainpadding margin_top flexbetween" v-if="couponlist.length" @click="show=true">
				<view class="ershiba xiaohei">优惠券</view>
				<view class="flexright">
					<view class="ershiba xiaohui margin_right1">{{coupon_id?"已选择":"有优惠可选"}}</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="ffffff radius mainpadding margin_top flexbetween">
				<view class="ershiba xiaohei">发票</view>
				<u-radio-group v-model="is_openfp" placement="row" circle>
					<u-radio activeColor="#ff8505" :customStyle="{marginRight: '30rpx'}" label="否" :name="0"></u-radio>
					<u-radio activeColor="#ff8505" label="是" :name="1"></u-radio>
				</u-radio-group>
			</view>
			<view class="ffffff radius mainpadding margin_top">
				<view class="flexbetween">
					<view class="ershil xiaohei">应付金额</view>
					<view class="ershiba xiaohui fonweight">￥{{dataAll.total_price}}</view>
				</view>
				<view class="flexbetween margin_top">
					<view class="ershil xiaohei">联盟积分抵扣</view>
					<view class="ershiba xiaohui fonweight">￥{{dataAll.score_price}}</view>
				</view>
				<view class="flexbetween margin_top">
					<view class="ershil xiaohei">首单优惠</view>
					<view class="ershiba xiaohui fonweight">￥{{dataAll.sdyh_price}}</view>
				</view>
				<view class="flexbetween margin_top">
					<view class="ershil xiaohei">活动优惠</view>
					<view class="ershiba xiaohui fonweight">￥{{dataAll.activity_price}}</view>
				</view>
				<view class="flexbetween margin_top">
					<view class="ershil xiaohei">优惠券抵扣</view>
					<view class="ershiba xiaohui fonweight">￥{{dataAll.coupon_price}}</view>
				</view>
				<view class="flexbetween margin_top">
					<view class="ershil xiaohei">实际支付</view>
					<view class="ershiba xiaohong fonweight">￥{{dataAll.pay_price}}</view>
				</view>
			</view>
		</view>
		<view class="gudingdb ffffff mainpadding flexbetween">
			<view class="xiaocheng strongtext">￥
				<text class="bigtext fonweight xiaocheng">{{dataAll.pay_price}}</text>
			</view>
			<view class="huabtn flexcenter" @click="goYuDingorder">立即预定</view>
		</view>
		<u-popup :show="show" @close="show=false" closeable :round="12">
			<view class="mainpadding" style="padding-top: 50rpx;">
				<scroll-view scroll-y="true" style="max-height: 500rpx;">
					<view class=" block1 margin_top mainpadding radius flexbetween" v-for="item in couponlist" :key="item.id">
						<view class="flexleft">
							<view class=" margin_right4">
								<view class="strongtext xiaocheng fonweight">￥
									<text class="sishi xiaocheng fonweight">{{item.price}}</text>
								</view>
								<view class="xiaohui strongtext margin_top2">满{{Number(item.mj_price)}}可用</view>
							</view>
							<view class="dqline margin_right"></view>
							<view class="">
								<view class="zhonghei sanshier fonweight">{{item.name}}</view>
								<view class="strongtext xiaohui margin_top2">有效期至{{item.end_time_text}}</view>
							</view>
						</view>
						<view class="wlhbtn flexcenter" @click="selectyhq(item.id)">立即使用</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				start: "", //年月日
				end: "", //年月日
				startime: "", //开始时间
				endtime: "", //结束时间
				startweek: "", //开始周
				endweek: "", //结束周
				daynum: 1,
				num: 1,
				dataAll: {},
				people_name: "",
				people_mobile: "",
				note: "",
				is_openfp: 0,
				pageShow: false,
				show:false,
				couponlist:[],
				coupon_id:"",
			}
		},
		onLoad(options) {
			let data = JSON.parse(decodeURIComponent(options.msg));
			this.listid = data.id
			this.start = data.start
			this.end = data.end
			this.startime = data.startime
			this.endtime = data.endtime
			this.startweek = data.startweek
			this.endweek = data.endweek
			this.daynum = data.daynum
			this.init()
		},
		methods: {
			
			selectyhq(id){
				this.show = false
				this.coupon_id = id
				this.init()
			},
			init() {
				if (!httpRequest.checkIsLogin()) {
					httpRequest.doLogin();
					return false;
				} else {
					uni.showLoading({
						mask:true,
						title:"请稍后"
					})
					httpRequest.request('/api/hotelordercl/sure', 'POST', {
						hotel_type_id: this.listid,
						start_date: this.start,
						end_date: this.end,
						people_num: this.num,
						coupon_id: this.coupon_id
					}, false, false, false).then(res => {
						uni.hideLoading()
						if(res.code==1){
							this.pageShow = true
							this.dataAll = res.data
							this.couponlist = res.data.couponlist
						}else{
							httpRequest.toast(res.msg);
							setTimeout(()=>{
								uni.navigateBack(1)
							},1000)
						}
						
					})
				}
			},
			goYuDingorder() {
				if (this.people_name == "") {
					httpRequest.toast("请填写入住人姓名")
					return false
				}
				if (this.people_mobile == "") {
					httpRequest.toast("请填写入住人手机号")
					return false
				}
				uni.showLoading({
					mask:true,
					title:"请稍后"
				})
				httpRequest.request('/api/hotelordercl/create_order', 'GET', {
					hotel_type_id: this.listid,
					start_date: this.start,
					end_date: this.end,
					people_num: this.num,
					people_name: this.people_name,
					people_mobile: this.people_mobile,
					note: this.note,
					is_openfp:this.is_openfp,
					coupon_id:this.coupon_id,
				}, false, false, false).then(res => {
					uni.hideLoading()
					if (res.code == 1) {
						let data = {
							id: res.data.id,
							pay_price: res.data.pay_price,
							type: 1,
						}
						uni.redirectTo({
							url: '/pages_shouye/dingdanzf?msg=' + encodeURIComponent(JSON.stringify(data))
						})
					} else {
						httpRequest.toast('不好意思，当前房型已满!');
						setTimeout(() => {
							uni.navigateBack(-1)
						}, 1000)
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})

			},
			jian() {
				if (this.num > 1) {
					this.num--;
					this.init()
				}
			},
			jia() {
				if (this.num < this.dataAll.allow_num) {
					this.num++;
					this.init()
				} else {
					// httpRequest.toast("当前房型剩余"+this.dataAll.allow_num+"间")
					httpRequest.toast("当前房型已满")
				}
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.block1 {
		background: #FBF6F1;
		border-radius: 14rpx 14rpx 14rpx 14rpx;
	}
	.wlhbtn {
		width: 132rpx;
		height: 49rpx;
		background: rgba(255, 133, 5, 0.1);
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		font-size: 26rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #FF8505;
		border: 1rpx solid #FF8505;
	}
	.huabtn {
		width: 295rpx;
		height: 76rpx;
		border-radius: 120rpx;
		font-size: 32rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		background-color: #FF9341;
	}

	.dqline {
		width: 2rpx;
		height: 21rpx;
		background-color: #EFEFEF;
	}

	.hhbtn {
		width: 89rpx;
		height: 37rpx;
		border-radius: 37rpx 37rpx 37rpx 37rpx;
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #999999;
		border: 2rpx solid #999999;
	}
</style>